<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
<!-- 二者都是满足条件就显示，不满足就不显示
       v-show 不满足条件时 只是在css属性中添加了一个display:none
        v-if 不满足条件时  在切换时回把它的数据绑定、组件全部销毁并重建
       -->
        <div v-show="show">可以看到</div>
        <div v-show="hidden">看不到</div>
        <div v-if="show">可以看到--if</div>
        <div v-else>可以看到--if-------</div>
        <div v-if="hidden">不可以看到--if</div>
    </div>
</body>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                show:true,
                hidden:false
            },
            methods:{}


        })
    </script>
</html>